<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .butt {
      float: right;
      display: none;
    }
    .divv {
      margin: 10px 0;
      /* text-align: center; */
    }
    .group {
      border: 1px solid blue;
      padding: 10px;
      border-radius: 20px;
    }
    .divv:hover .butt {
      display: block;
    }
    .inn {
      float: left;
      height: 18px;
      text-align: center;
    }
    .divv:hover {
      box-shadow: 10px 10px 15px purple;
    }
  </style>

  <body>
    <!-- 输入 -->
    <div class="group">
      <input type="text" id="text" placeholder="请输入" />
      <input type="button" value="添加" onclick="handeclick()" />
      <button id="but2">全选</button>
      <button id="but1">删除</button>

      <div id="xq">
        <div class="divv">
          <input type="checkbox" class="inn" />yyc
          <button class="butt">删除</button>
        </div>
        <div class="divv">
          <input type="checkbox" class="inn" />真的
          <button class="butt">删除</button>
        </div>
        <div class="divv">
          <input type="checkbox" class="inn" />实在是
          <button class="butt">删除</button>
        </div>
        <div class="divv">
          <input type="checkbox" class="inn" />太帅了！！
          <button class="butt">删除</button>
        </div>
      </div>
    </div>
  </body>

  <script lang="javascript">

   document.getElementById('but1').addEventListener('click',function (){
        var divs = document.getElementsByClassName('divv');
        for(let i=divs.length-1 ;i >= 0 ; i--){
            if(divs[i].children[0].checked == true){
                divs[i].parentNode.removeChild(divs[i]);
            }    
        }
    });

    document.getElementById('but2').addEventListener('click',function(){
        var divs = document.getElementsByClassName('divv');
        var cnt = 0;
        for(let i=divs.length-1 ;i >= 0 ; i--){
            if(divs[i].children[0].checked == true){
                cnt++;
            }    
        }
        if(cnt == divs.length){
            for(let i=divs.length-1 ;i >= 0 ; i--){
                divs[i].children[0].checked = false;
            }
        }
        else if(cnt != divs.length){
            for(let i=divs.length-1 ;i >= 0 ; i--){
                divs[i].children[0].checked = true;
            }
        }




    })



    const buts=document.getElementsByClassName('butt');

    for(let  i = 0 ; i < buts.length ; i ++){
        buts[i].onclick = function (){
            this.parentNode.parentNode.removeChild(this.parentNode);
        }
    };

    const divs = document.getElementsByClassName('divv');
    for(let i=0 ;i < divs.length ;i++){
        divs[i].onclick = function(){
            this.children[0].checked= !this.children[0].checked;
        }
    }

    function handeclick(){

        if(document.getElementById("text").value == ""){
            return 0;
        }

        const tem = document.getElementById("xq");
        var di = document.createElement("div");
        var de = document.createElement("button");
        var inn = document.createElement("input");
        inn.type="checkbox";
        inn.className="inn";
        de.innerText="删除";
        de.className='butt';
        de.onclick = function (){
            this.parentNode.parentNode.removeChild(this.parentNode);
        }
        di.className='divv';
        const s = document.getElementById("text").value;
        document.getElementById("text").value='';
        di.innerText = s;
        di.append(inn);
        di.append(de);

        di.onclick=function(){
            inn.checked= !inn.checked;
        }

        tem.append(di);
    }
    // const but = document.getElementById("but1");
    // but.onclick=handeclick;

    document.getElementById("text").addEventListener("keyup",function(e){
        if(e.keyCode == 13){
            handeclick();
        }
    });
    // but.addEventListener('click',handeclick);
  </script>
</html>
